<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    {% if nav_tab == "hot" or nav_tab == "" %}
        热门课程
    {% endif %}
    {% if nav_tab == "all" %}
        所有课程
    {% endif %}

{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
    <main class="section">
        <div class="columns is-multiline">
            {# 切换导航栏 #}
            <div class="column is-full">
                <div class="tabs is-centered">
                    <ul>
                        <li class="{% if nav_tab == "hot" or nav_tab == "" %} is-active {% endif %}">
                            <a href="{% url 'courses:list' %}?nav_tab=hot">
                                <span>
                                    <strong>
                                        热&nbsp;门&nbsp;课&nbsp;程
                                        {% if nav_tab == "hot" or nav_tab == "" %}
                                            【共&nbsp;{{ courses_hot.object_list.count }}&nbsp;门】
                                        {% endif %}
                                    </strong>
                                </span>
                            </a>
                        </li>
                        <li class="{% if nav_tab == "all" %} is-active {% endif %}">
                            <a href="{% url 'courses:list' %}?nav_tab=all">
                                <span>
                                    <strong>
                                        所&nbsp;有&nbsp;课&nbsp;程
                                        {% if nav_tab == "all" %}
                                            【共&nbsp;{{ course_nums }}&nbsp;门】
                                        {% endif %}
                                    </strong>
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            {# 热门课程 #}
            {% if nav_tab == "hot" or nav_tab == "" %}
                <div class="column is-full">
                    <div class="columns is-multiline">
                        {# 课程列表 #}
                        <div class="column is-full">
                            <div class="columns is-multiline">
                                {# 课程列表 #}
                                {% for course in courses_hot.object_list %}
                                    <div class="column is-4-desktop">
                                        <div class="card">
                                            <div class="card-image">
                                                <a href="{% url 'courses:home' course.id %}">
                                                    <figure class="image is-16by9">
                                                        <img src="{{ MEDIA_URL }}{{ course.image }}"
                                                             alt="Placeholder image">
                                                    </figure>
                                                </a>
                                            </div>
                                            <div class="card-content has-background-primary">
                                                <div class="media">
                                                    <div class="media-content has-text-centered">
                                                        {# 课程名 #}
                                                        <p class="title is-3 has-text-white">
                                                            <a href="{% url 'course:home' course.id %}"
                                                               class="has-text-link-light">
                                                                {{ course.name }}
                                                            </a>
                                                        </p>
                                                        <hr>
                                                        {# 课程信息 #}
                                                        <div class="columns is-multiline">
                                                            {# 课程时长 #}
                                                            <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        课&nbsp;程&nbsp;时&nbsp;长
                                                                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                                                                        ：{{ course.learn_times }}
                                                                    </strong>
                                                                </span>
                                                            </div>
                                                            {# 学生数 #}
                                                            <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        学&nbsp;生&nbsp;数
                                                                        <i class="fa fa-address-card"
                                                                           aria-hidden="true"></i>
                                                                        ：{{ course.students }}
                                                                    </strong>
                                                                </span>
                                                            </div>
                                                            {# 收藏数 #}
                                                            <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        收&nbsp;藏&nbsp;数
                                                                        <i class="fa fa-star" aria-hidden="true"></i>
                                                                        ：{{ course.fav_nums }}
                                                                    </strong>
                                                                </span>
                                                            </div>
                                                            {# 难度 #}
                                                            <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        难&nbsp;&nbsp;度
                                                                        <i class="fa fa-google-wallet"
                                                                           aria-hidden="true"></i>
                                                                        ：{{ course.get_degree_display }}
                                                                    </strong>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                                {# 分页按钮 #}
                                <div class="column is-full">
                                    <nav class="pagination is-rounded is-centered" role="navigation"
                                         aria-label="pagination">

                                        {% if courses.has_previous %}
                                            <a class="pagination-previous"
                                               href="?{{ courses.previous_page_number.querystring }}">上一页</a>
                                        {% endif %}
                                        <ul class="pagination-list">
                                            {% for page in courses.pages %}
                                                {% if page %}
                                                    {% ifequal page courses.number %}
                                                        <li>
                                                            <a class="pagination-link is-current"
                                                               href="?{{ page.querystring }}"
                                                               aria-label="Goto page 1">
                                                                {{ page }}
                                                            </a>
                                                        </li>
                                                    {% else %}
                                                        <li>
                                                            <a class="pagination-link"
                                                               href="?{{ page.querystring }}"
                                                               aria-label="Goto page 1">
                                                                {{ page }}
                                                            </a>
                                                        </li>
                                                    {% endifequal %}
                                                {% else %}
                                                    <li><span class="pagination-ellipsis">&hellip;</span></li>
                                                {% endif %}
                                            {% endfor %}
                                        </ul>
                                        {% if courses.has_next %}
                                            <a class="pagination-next"
                                               href="?{{ courses.next_page_number.querystring }}">
                                                下一页
                                            </a>
                                        {% endif %}
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
            {# 所有课程 #}
            {% if nav_tab == "all" %}
                <div class="column is-full">
                    <div class="columns is-multiline">
                        {# 课程列表 #}
                        <div class="column is-full">
                            <div class="columns is-multiline">
                                {# 课程列表 #}
                                {% for course in courses.object_list %}
                                    <div class="column is-4-desktop">
                                        <div class="card">
                                            <div class="card-image">
                                                <a href="{% url 'courses:home' course.id %}">
                                                    <figure class="image is-16by9">
                                                        <img src="{{ MEDIA_URL }}{{ course.image }}"
                                                             alt="Placeholder image">
                                                    </figure>
                                                </a>
                                            </div>
                                            <div class="card-content has-background-primary">
                                                <div class="media">
                                                    <div class="media-content has-text-centered">
                                                        {# 课程名 #}
                                                        <p class="title is-3 has-text-white">
                                                            <a href="{% url 'course:home' course.id %}"
                                                               class="has-text-link-light">
                                                                {{ course.name }}

                                                            </a>
                                                        </p>
                                                        <hr>
                                                        {# 课程信息 #}
                                                        <div class="columns is-multiline">
                                                            {# 课程时长 #}
                                                            <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        课&nbsp;程&nbsp;时&nbsp;长
                                                                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                                                                        ：{{ course.learn_times }}
                                                                    </strong>
                                                                </span>
                                                            </div>
                                                            {# 学生数 #}
                                                            <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        学&nbsp;生&nbsp;数
                                                                        <i class="fa fa-address-card"
                                                                           aria-hidden="true"></i>
                                                                        ：{{ course.students }}
                                                                    </strong>
                                                                </span>
                                                            </div>
                                                            {# 收藏数 #}
                                                            <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        收&nbsp;藏&nbsp;数
                                                                        <i class="fa fa-star" aria-hidden="true"></i>
                                                                        ：{{ course.fav_nums }}
                                                                    </strong>
                                                                </span>
                                                            </div>
                                                            {# 难度 #}
                                                            <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        难&nbsp;&nbsp;度
                                                                        <i class="fa fa-google-wallet"
                                                                           aria-hidden="true"></i>
                                                                        ：{{ course.get_degree_display }}
                                                                    </strong>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                                {# 分页按钮 #}
                                <div class="column is-full">
                                    <nav class="pagination is-rounded is-centered" role="navigation"
                                         aria-label="pagination">

                                        {% if courses.has_previous %}
                                            <a class="pagination-previous"
                                               href="?{{ courses.previous_page_number.querystring }}">上一页</a>
                                        {% endif %}
                                        <ul class="pagination-list">
                                            {% for page in courses.pages %}
                                                {% if page %}
                                                    {% ifequal page courses.number %}
                                                        <li>
                                                            <a class="pagination-link is-current"
                                                               href="?{{ page.querystring }}"
                                                               aria-label="Goto page 1">
                                                                {{ page }}
                                                            </a>
                                                        </li>
                                                    {% else %}
                                                        <li>
                                                            <a class="pagination-link"
                                                               href="?{{ page.querystring }}"
                                                               aria-label="Goto page 1">
                                                                {{ page }}
                                                            </a>
                                                        </li>
                                                    {% endifequal %}
                                                {% else %}
                                                    <li><span class="pagination-ellipsis">&hellip;</span></li>
                                                {% endif %}
                                            {% endfor %}
                                        </ul>
                                        {% if courses.has_next %}
                                            <a class="pagination-next"
                                               href="?{{ courses.next_page_number.querystring }}">
                                                下一页
                                            </a>
                                        {% endif %}
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

        </div>
    </main>

{% endblock %}